<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <script type="javascript" src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/layui.js"></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js"></script>
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>员工管理</li>
    <li>修改信息</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>员工信息</span></div>
</div>

<form class="layui-form" lay-filter="detail">

  <div class="layui-form-item" >
    <%--<div class="layui-upload">
      <button type="button" class="layui-btn" id="test1">上传图片</button>
      <div class="layui-upload-list" >
        <img class="layui-upload-img" name="headPic" id="demo1" style="width: 100px">
        <p id="demoText"></p>
      </div>
      <div style="width: 95px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
          <div class="layui-progress-bar" lay-percent=""></div>
        </div>
      </div>
    </div>
    <a name="list-progress"> </a>
    <div style="margin-top: 10px;">
    </div>--%>
    <div class="layui-form-item" >
      <label class="layui-form-label">员工编号：</label>
      <div class="layui-input-inline">
        <input type="text" id="empNo" lay-verify="title" name="empNo" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">必填，要求长度不小于3 </div>
      <label class="layui-form-label">员工姓名：</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="required" id="ename" name="ename" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">必填，不能超过30个字符</div>
    </div>

    <div class="layui-form-item" >
      <label class="layui-form-label">账号：</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="pass1" id="loginName" name="loginName" class="layui-input" >
      </div>
      <div class="layui-form-mid layui-word-aux">必填，账号必须6到12位</div>
      <label class="layui-form-label">密码：</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="pass" id="password" name="password" class="layui-input" >
      </div>
      <div class="layui-form-mid layui-word-aux">必填，密码必须6到12位</div>
    </div>
    <div class="layui-form-item" >
      <label class="layui-form-label">联系方式：</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="required" id="tel" name="tel" class="layui-input" >
      </div>
      <div class="layui-form-mid layui-word-aux">必填，不能超过30个字符</div>
      <label class="layui-form-label">年龄：</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="required" id="age" name="age" class="layui-input" >
      </div>
    </div>

    <div class="layui-form-item" >
      <label class="layui-form-label">性别：</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="1" title="男" checked="">
        <input type="radio" name="sex" value="0" title="女">
      </div>
    </div>
      <div class="layui-form-item" >
        <label class="layui-form-label">所属部门：</label>
        <div class="layui-input-inline">
          <select name="deptNo" id="deptNo" lay-filter="deptSelect" lay-verify="required">
            <option value="">请选择</option>
          </select>
        </div>
        <label class="layui-form-label">职位：</label>
        <div class="layui-input-inline">
          <select name="roleid" id="roleid" lay-filter="deptSelect" lay-verify="required">
            <option value="">请选择</option>
          </select>
        </div>
        <label class="layui-form-label">领导：</label>
        <div class="layui-input-inline">
          <input type="text" id="mgrid" name="mgrid" class="layui-input" >
        </div>
      </div>
    <div class="layui-form-item" >
      <label class="layui-form-label">出生年月：</label>
      <div class="layui-input-inline">
        <input type="text" name="birthday" id="date1"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
      <label class="layui-form-label">入职时间：</label>
      <div class="layui-input-inline">
        <input type="text" name="hiredate" id="date2"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
      <label class="layui-form-label">离职时间：</label>
      <div class="layui-input-inline">
        <input type="text" name="dimissionTime" id="date3"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item" >

    </div>
    <div class="layui-form-item" >
    </div>
    <div class="layui-form-item" >
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline" >
        <select name="status" id="status" readonly>
          <option value="0">离职</option>
          <option value="1">在职</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn btn-edit" lay-submit="" lay-filter="savBtn">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>

</form>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
  layui.use(['form','laydate','layer','jquery','upload','element'], function () {
    var form = layui.form
            ,laydate = layui.laydate
            ,layer = layui.layer
            ,$ = layui.jquery
            ,element = layui.element
            ,upload = layui.upload;


    //
    //常规使用 - 普通图片上传
    /* var uploadInst = upload.render({
       elem: '#test1'
       ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
       ,before: function(obj){
         //预读本地文件示例，不支持ie8
         obj.preview(function(index, file, result){
           $('#savBtn').attr('src', result); //图片链接（base64）
         });

         element.progress('demo', '0%'); //进度条复位
         layer.msg('上传中', {icon: 16, time: 0});
       }
       ,done: function(res){
         //如果上传失败
         if(res.code > 0){
           return layer.msg('上传失败');
         }
         //上传成功的一些操作
         //……
         $('#demoText').html(''); //置空上传失败的状态
       }
       ,error: function(){
         //演示失败状态，并实现重传
         var demoText = $('#demoText');
         demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
         demoText.find('.demo-reload').on('click', function(){
           uploadInst.upload();
         });
       }
       //进度条
       ,progress: function(n, elem, e){
         element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
         if(n == 100){
           layer.msg('上传完毕', {icon: 1});
         }
       }
     });*/

    //部门赋值部分
     $.ajax({
       url: "/dept/selectDeptList",
       type: "post",
       dataType: "json",
       success: function(data) {
         // console.log(data)
         //使用循环遍历，给下拉列表赋值
         $.each(data.data,function (index,value) {
           $("#deptNo").append(new Option(value.deptName,value.deptNo))//对应映射字段名 第一个为显示的值  第二个为value值
         });
         form.render("select")//重新渲染 固定写法
       }
     });
    //职位赋值部分
    $.ajax({
      url: "/role/selectRoleList",
      type: "post",
      dataType: "json",
      success: function(data) {
        // console.log(data)
        //使用循环遍历，给下拉列表赋值
        $.each(data.data,function (index,value) {
          $("#roleid").append(new Option(value.job,value.id))//对应映射字段名 第一个为显示的值  第二个为value值
        });
        form.render("select")//重新渲染 固定写法
      }
    });
    //日期
    laydate.render({
      elem: '#date1'
      ,trigger:'click'
    });
    laydate.render({
      elem: '#date2'
      ,trigger:'click'
    });
    laydate.render({
      elem: '#date3'
      ,trigger:'click'
    });

    form.verify({
      title: function(value){
        if(value.length < 3){
          return '员工至少得3个字符啊';
        }
      }
      ,pass1: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ]
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ]
    });
    form.on('submit(savBtn)', function(data){
      var datas = data.field;
      console.log(datas)
      //向后台发送数据并进行添加操作
      $.ajax({
        url:"/user/addUser",
        type:"POST",
        contentType:"application/json",
        data: JSON.stringify(datas),
        success:function(operate){
          if(operate.message!="用户添加成功"){
            layer.msg("添加成功!",{
              icon:6,
              time:500
            },function(){
              var iframeIndex = parent.layer.getFrameIndex(window.name);
              parent.layer.close(iframeIndex);
              parent.layui.table.reload('demo',{page:{curr:1}})
            });
          }else{
            layer.msg("添加失败!");
          }
          form.render();
        }})
      return false;
    });
    form.render();
  })
</script>
</body>
</html>
